<nav class="navbar navbar-default navbar-fixed-top navbar navbar-inverse" role="navigation" scroll>
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header" >

        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand primary" href="#" ng-show="!stats">{{ 'TITLE' | translate }}</a> 
        <a class="navbar-brand primary" href="#" ng-show="stats"> Insights </a>  
      </div>
    
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true" >
      
        <ul class="nav navbar-nav" ng-hide="boolChangeClass"> 
          <li>{{scroll}}</li>
           <li> <a href="#/card-admin/new"> {{ 'NEW_CARD' | translate }} </a> </li>
          <li> <a href="#"> {{ 'SEARCH' | translate }} </a> </li>
          <li> <a href="#/chat"> {{ 'CHAT' | translate }} </a> </li>
          <li> <a href="#/me"> {{ 'ME' | translate }} </a> </li>
          <li> <a href="#/discover"> {{ 'DISCOVER' | translate }} </a> </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
         <li> <a role="button" href="" ng-show="card" ng-click="saveDraft()">{{ 'SAVE' | translate }}</a> </li>
         <li> <a role="button" href="" ng-show="user" ng-click="updateRound()">{{ 'SAVE' | translate }}</a> </li>
         <li> <a href="#/signup" ng-show="!user">{{ 'SIGNUP' | translate }}</a> </li>
         <li> <a href="#/signin" ng-show="!user">{{ 'SIGNIN' | translate }}</a> </li>
         <li> <a href="#/account" ng-show="user">{{user.username}}</a> </li>
         <li> <a href="#/signout" ng-show="user">{{ 'SIGNOUT' | translate }}</a> </li>


          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a role="button" href="" ng-click="$parent.setLang('en_US')" ng-show="lang==='zh_CN'">{{'BUTTON_LANG_EN'|translate}}</a></li>
              <li><a role="button" href="" ng-click="$parent.setLang('zh_CN')" ng-show="lang==='en_US'">{{'BUTTON_LANG_CN'|translate}}</a></li>
              <li><a role="button" href="" ng-click="$parent.debug = !$parent.debug;">{{ 'DEBUG' | translate }}</a></li>
              <li><a role="button" href="" ng-if="$parent.sendError" ng-click="$parent.sendError()">{{ 'SEND_ERROR' | translate }}</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
    
